<template>
  <div v-loading="isLoading" class="blogList-container">
    <h2>文章分类</h2>
    <RightList @select="handleSelect($event)" :list="list" />
  </div>
</template>

<script>
import RightList from "./list.vue";
import getListData from "@/api/getBlogList";
export default {
  components: {
    RightList,
  },
  data() {
    return {
      banners: [],
      isLoading: true,
    };
  },
  computed: {
    getcategoryId() {
      return +this.$route.params.categoryId || -1;
    },
    list() {
      //列表数据
      // articleCount文章总数
      const result = [
        {
          name: "全部分类",
          id: -1,
          articleCount: this.banners.reduce((a, b) => {
            return a + b.articleCount;
          }, 0),
        },
        ...this.banners,
      ];
      // 在每个对象中添加新的属性
      return result.map((item) => {
        return { ...item, isSelect: item.id === this.getcategoryId ,};
      });
    },
  },
  methods: {
    handleSelect(item) {
        
// 改变路由
 if (item.id== -1) {
        // 无刷新跳转
        this.$router.push({
          name: "Blog",
          query: {
            page: 1,
          },
        });
      } else {
        this.$router.push({
          name: "categoryId",
          params: {
            categoryId: item.id,
          },
          query: {
            page: 1,
          },
        });
      }
    }
    },
  
  async created() {
    this.banners = await getListData();
    this.isLoading = false;
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.blogList-container {
  position: relative;
  width: 300px;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow:auto;
  h2 {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1em;
  }
}
</style>